import React, { useState } from 'react';
import { history } from 'umi';
import { Row, Col, Steps, Typography, Form, Input, Checkbox, Select, DatePicker, Button, RadioChangeEvent } from 'antd';
import styles from './style.less';
import DebounceSelect from './components/DebounceSecect';
import { OptionsValue } from './data';
import { selectSearch } from './service';
import Rules from './mockData';
console.log(Rules)

const { Step } = Steps;
const { Title } = Typography;
const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;
// DatePicker, Switch

const options = [
  { label: '百度', value: 'baidu' },
  { label: '搜狗', value: 'sougou' },
  { label: '360', value: '360' },
];

export default function Detail() {
  const [planForm] = Form.useForm();
  const [clerkForm] = Form.useForm();
  const [accountForm] = Form.useForm();
  const [value, setValue] = useState<OptionsValue[]>([]);
  const [checkBoxSelect, setCheckBoxSelect] = useState<string[]>(['baidu']);
  // const params = useLocation();
  console.log(history.location);
  // const name = history.location.state.name;
  // const [radioValue, setRadioValue] = useState(1);

  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onChange = (checkedValues: any) => {
    console.log('checked = ', checkedValues);
    setCheckBoxSelect([...checkedValues]);
    // setRadioValue(e.target.value);
  };

  const handleCancel = () => {
    clerkForm.resetFields();
    accountForm.resetFields();
    history.goBack();
  }

  const renderDom = (item: any, index: number) => {
    console.log(item)
    if (item === 'baidu') {
      return (
        <Form.Item name='百度' label='百度' rules={Rules.platform} className={styles.formItem} key={index}>
          <Input placeholder='请输入移动出价' allowClear className={styles.formItemContent} />
        </Form.Item>
      );
    } else if (item === 'sougou') {
      return (
        <Form.Item name='搜狗' label='搜狗' rules={Rules.platform} className={styles.formItem} key={index}>
          <Input placeholder='请输入移动出价' allowClear className={styles.formItemContent} />
        </Form.Item>
      );
    } else if (item === '360') {
      return (
        <Form.Item name='360' label='360' rules={Rules.platform} className={styles.formItem} key={index}>
          <Input placeholder='请输入移动出价' allowClear className={styles.formItemContent} />
        </Form.Item>
      );
    } else {
      return (
        <></>
      );
    }
  }

  return (
    <Row className={styles.row}>
      <Col flex={1}>
        <Steps progressDot current={0} direction="vertical" className={styles.step}>
          <Step
            title="推广计划"
            description={
              <>
                <div>基础设置</div>
                <div>预算及出价</div>
              </>
            }
          />
          <Step
            title="推广单元"
            description={
              <>
                <div>单元设置</div>
                <div>关键词设置</div>
              </>
            }
          />
          <Step
            title="推广创意"
            description={
              <>
                <div>创意文案</div>
                <div>落地页信息</div>
              </>
            }
          />
        </Steps>
      </Col>
      <Col flex={22}>
        <div className={styles.container}>
          <Form.Provider>
            {/* 标题 */}
            <Title level={5}></Title>
            {/* 所属计划表单 */}
            <Form form={planForm} name="planForm" className={styles.form} onFinish={onFinish} labelCol={{ span: 6 }}>
              <Form.Item name='planId' label='计划名称' rules={Rules.planId} className={styles.formItem}>
                <DebounceSelect
                  mode="multiple"
                  placeholder="请选择推广计划"
                  allowClear
                  className={styles.formItemContent}
                  fetchOptions={selectSearch}
                />
              </Form.Item>
              <Form.Item name='unitId' label='计划名称' rules={Rules.unitId} className={styles.formItem}>
                <DebounceSelect
                  mode="multiple"
                  placeholder="请选择推广计划"
                  allowClear
                  className={styles.formItemContent}
                  fetchOptions={selectSearch}
                />
              </Form.Item>
            </Form>
            {/* 标题 */}
            <Title level={5}>创意文案</Title>
            {/* 创意文案表单 */}
            <Form form={clerkForm} name="basicForm" className={styles.form} onFinish={onFinish} labelCol={{ span: 6 }}>
              <Form.Item name='title' label='创意标题' rules={Rules.title} className={styles.formItem}>
                <Input placeholder='请输入创意标题' allowClear className={styles.formItemContent} />
              </Form.Item>
              <Form.Item name='firstDesc' label='创意描述第一行' rules={Rules.firstDesc} className={styles.formItem}>
                <TextArea rows={4} placeholder='请输入创意描述第一行' allowClear className={styles.formItemContent} />
              </Form.Item>
              <Form.Item name='secondDesc' label='创意描述第二行' rules={Rules.secondDesc} className={styles.formItem}>
                <TextArea rows={4} placeholder='请输入创意描述第二行' allowClear className={styles.formItemContent} />
              </Form.Item>
            </Form>
            {/* 标题 */}
            <Title level={5}>落地页信息</Title>
            {/* 落地页信息表单 */}
            <Form form={accountForm} name="budgetBidForm" className={styles.form} onFinish={onFinish} labelCol={{ span: 6 }} initialValues={{ platform: ['baidu']}}>
              <Form.Item name='platform' label='推广平台' rules={Rules.platform} className={styles.formItem}>
                <Checkbox.Group options={options} onChange={onChange} />
                {/* 根据单选项切换相应内容 */}
              </Form.Item>
              {/* {renderDom()} */}
              {checkBoxSelect.map((item, index) => renderDom(item, index))}
            </Form>
          </Form.Provider>
          <div>
            <Button type='primary' className={styles.saveBtn}>保存</Button>
            <Button onClick={handleCancel}>取消</Button>
          </div>
        </div>
      </Col>
    </Row>
  );
}
